Activity: Create a sitemap for a website 為網站建立網站地圖
網站首頁的重要性（Why Homepage Layout Matters）
- 首頁是入口：是使用者訪問網站的第一站；
- 導航中心：提供網站整體結構的預覽,引導使用者進入各個功能區域；
- 印象起點：決定使用者是否願意繼續瀏覽,是使用者體驗的起點。
常見網站首頁佈局型別（Common Homepage Layouts）
單欄佈局（Single-Column Layout）
所有內容垂直排列在一個主欄中；邏輯清晰,資訊流直線向下；
應用場景：很多移動端網頁都採用單欄佈局。這是在移動裝置上呈現資訊的一種非常直接且有效的方式，尤其適合為手機或小屏裝置做設計。（因為移動端螢幕窄，單欄能避免橫向滾動）
優點：簡單易讀,適合小屏裝置。
多欄佈局（Multi-Column Layout）
通常包含兩欄或更多欄的內容區域。在許多桌面端（PC端）網站上應該經常見到這種形式。
如果是兩欄佈局，頁面上通常會有一個明顯的視覺焦點。所謂視覺焦點，是指頁面上能迅速吸引使用者注意力的特定區域。（這是一種“視覺引導”策略，在設計中起到聚焦作用）
以 Grow with Google 網站為例，它用圖片作為視覺焦點。輔助內容，比如文字，佔頁面的大約 25% 到 45%。
當頁面擁有多個欄位（如三欄及以上）時，設計師會透過視覺權重的分配，來最佳化使用者體驗。某個越南家庭食譜網站採用了三欄佈局，這樣一來，更多的菜譜內容可以顯示在“首屏區域”（above the fold）中，使用者無需滾動即可看到。（“above the fold”是網頁設計術語，指無需滾動即可見的內容）
方塊佈局（Box Layout）
由不同大小或比例的方框組成。它通常用於網站的首頁或主入口頁面。（這種佈局便於內容分類展示，特別適合電商、內容聚合類平臺）
比如 Nordstrom 使用方框將節日禮品按不同類別展示。透過盒狀佈局，使用者可以迅速找到適合預算和型別的禮品。
這種佈局使電商網站可以靈活替換商品，根據季節、促銷等內容進行更新，也能更有效地引導使用者關注重點商品。
主圖佈局（Featured Image Layout）
透過一張主圖或影片抓住使用者的注意力，該影象通常佔據整個頁面。（這種佈局強調視覺衝擊力，常見於產品頁或品牌展示頁）
這種佈局在產品展示頁面中非常常見，因為設計理念認為“視覺驅動銷售”——圖片是最快打動使用者的方式。大而醒目的主圖有助於與使用者建立情感連線，並留下深刻的第一印象。該佈局常搭配“固定導航欄（Sticky Navigation）”，即使用者滾動頁面時，選單依然停留在頂部或側邊。
非對稱佈局（Asymmetrical Layout）
故意在頁面的不同區域之間製造不平衡，營造動感或突出重點。（打破傳統對稱框架，提升現代感與設計感）兩種常見的非對稱佈局是F 型佈局（F-shape）和Z 型佈局（Z-shape），它們模仿的是使用者閱讀頁面的視線軌跡。
F 型佈局適合展示大量資訊，它的好處是便於使用者快速掃描內容，特別是在列表頁或搜尋結果中。（頭部資訊最重要，越往下和右側越弱）
Z 型佈局則常見於內容較少的頁面，它模仿西方使用者“從左到右，從上到下”的自然閱讀軌跡。（常用於登入頁、宣傳頁等）
卡片網格佈局（Grid of Cards）
將多個資訊塊包裝成卡片，以網格形式展示，為使用者提供內容的預覽。（模組化設計，便於響應式適配和互動）
你可能在食譜部落格、影片網站或內容平臺中見過這種佈局。（例如：YouTube、Pinterest、Netflix 的介面都大量使用了卡片網格）
分層蛋糕佈局（Tiered Layer Cake Layout）
頁面就像一層一層蛋糕一樣堆疊，每一層都可以包含不同的內容模組。每一層中的列數可以不同，也不需要保持一致性，這讓設計更加靈活多變。此佈局非常適合響應式網站設計，因為每一層內容都可以獨立控制和重排，便於在不同裝置上適配。
選擇合適佈局的建議（Best Practices）
1 依據專案目標與使用者需求選擇佈局
- 內容展示為主？→ 選擇卡片網格、方塊佈局；
- 強調品牌或產品視覺？→ 選擇主圖佈局；
- 資訊邏輯強、層次清晰？→ 考慮單欄或層級分明的佈局；
- 需要快速導航多類內容？→ 考慮多欄、分層佈局。
2 考慮響應式適配
- 手機、平板與桌面體驗需保持一致性；
- 可選佈局如：單欄、卡片網格、層蛋糕佈局。
3 不盲從趨勢
- 流行的設計未必適合所有使用者；
- 可用性（Usability）與無障礙性（Accessibility）更應被優先考慮。
單欄佈局（Single-column）
如果遇到頁面資訊結構簡單、內容需要線性閱讀的情況，比如部落格文章、問答、移動端資訊流頁面，就是用單欄佈局。原因是使用者在這種場景下更適合垂直滑動閱讀，減少視覺干擾，能夠專注於內容本身。
這種佈局給業務帶來的價值是提升資訊的可讀性和停留時間，尤其在內容驅動型網站中，能夠有效提高內容消費效率。
好處是開發簡單、響應式適配自然、視覺路徑清晰。經典案例是 Medium、知乎移動端、簡書（內容量大、結構簡單、強調閱讀體驗的網站）。
多欄佈局（Multi-column）
如果遇到需要同時展示主內容和附屬資訊的情況，比如電商首頁、新聞門戶、產品詳情頁，就是用多欄佈局。
原因是多欄結構可以並列呈現不同型別的資訊，比如主內容、側邊推薦、廣告模組等。
這種佈局給業務帶來的價值是提高頁面的資訊承載能力和曝光位利用率，尤其有利於提升轉化率和使用者停留時間。
好處是資訊結構清晰，佈局靈活，支援複雜互動設計。經典案例是 Amazon、淘寶 PC 端首頁、網易新聞（資訊塊多且並存的重內容網站）。
卡片網格佈局（Grid of Cards）
如果遇到內容是可重複結構的集合體，比如商品列表、影片推薦、圖文合集，就是用卡片網格佈局。
原因是卡片天然具備模組化、自包含的結構，使用者能快速識別和瀏覽。
這種佈局給業務帶來的價值是提升使用者的瀏覽效率和點選轉化率，適用於大規模內容聚合的場景。
好處是響應式適配好、視覺整潔、易於批次更新內容。
經典案例是 YouTube、Netflix、Pinterest、Bilibili（內容豐富且持續更新的網站）。
方塊佈局 / 盒子佈局（Box Layout）
如果遇到內容需要按分類展示，例如節日促銷、內容專區、價格段跳轉頁面，就是用方塊佈局。
原因是這種佈局讓使用者能一眼看到所有分類入口，快速進入感興趣的內容模組。
這種佈局給業務帶來的價值是提高使用者的跳轉率和分類轉化效率，尤其適合做導購或分流。
好處是內容更新靈活、視覺清晰、分類導向強。
經典案例是 Nordstrom 節日首頁、京東專題頁、Apple 配件分類頁（以分割槽為主導的網站）。
主圖佈局 / 全屏圖片佈局（Featured Image）
如果遇到需要透過強視覺傳達產品情緒或品牌感受的情況，比如高階產品介紹頁、品牌營銷頁，就是用主圖佈局。
原因是使用者的第一感知是情緒，不是文字，大圖+簡要文字最能打動人。
這種佈局給業務帶來的價值是塑造品牌形象、製造記憶點、驅動情感連線，對提升品牌認知度非常有效。
好處是視覺衝擊力強、頁面簡潔、核心資訊突出。
經典案例是 Tesla 官網、Airbnb 首頁、Apple iPhone 介紹頁（對品牌感知要求高的網站）。
F 形 / Z 形佈局（F-shape / Z-shape）
如果遇到需要使用者快速掃描大量資訊的頁面，比如搜尋結果頁、內容推薦頁，就是用F 形或 Z 形佈局。
原因是這類佈局是根據使用者眼動軌跡設計的，能最大程度貼合自然閱讀行為。
這種佈局給業務帶來的價值是提升內容的發現率和使用效率，尤其適合資訊密集型場景。
好處是瀏覽路徑自然、效率高、使用者負擔小。
經典案例是 Google 搜尋結果頁（F 形）、各類營銷頁（Z 形）、Booking.com（資訊多但要快速選出內容的網站）。
分層蛋糕佈局（Tiered Layer Cake）
如果遇到需要結構清晰地呈現多個模組內容，比如產品介紹頁、品牌官網，就是用分層蛋糕佈局。
原因是這種佈局透過“層與層之間的邏輯關係”組織內容，方便使用者一步步往下看，理解產品全貌。
這種佈局給業務帶來的價值是構建完整的產品/品牌資訊鏈條，提升使用者理解深度和轉化率。
好處是模組獨立、邏輯清晰、適合響應式重排。
經典案例是 Notion 官網、Strider Bikes 產品頁、Slack 的功能介紹頁（強調資訊邏輯遞進的網站）。